<!--
 * @项目信息: 大前端学习ing
 * @配置: 1.43
 * @作者: Ajax
 * @Date: 2020-04-21 13:40:21
 * @LastEditTime: 2020-04-22 16:30:16
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      outline: none;
    }

    .container {
      margin: 50px auto;
      padding: 10px;
      width: 450px;
      border: 2px solid #ccc;
      border-radius: 5px;
    }

    .header {
      display: flex;
      justify-content: space-around;
      padding: 5px 0 10px;
      box-shadow: 0px 1px 1px #00000030;
    }

    select {
      border-radius: 5px;
    }

    option {
      text-align: center;
    }

    .search_info {
      border: 1px solid #ccc;
      width: 70px;
    }

    .search_info:hover {
      background-color: antiquewhite;
    }

    .top ul {
      display: flex;
      justify-content: space-around;
      box-shadow: 0px 1px 1px #00000030;
    }

    .top ul li {
      flex: 14%;
      padding: 15px 0;
      text-align: center;
    }

    .con_info ul {
      display: flex;
      flex-wrap: wrap;
    }

    .con_info ul li {
      flex: 13%;
      padding: 15px 0;
      cursor: pointer;
      text-align: center;
      border: 2px solid transparent;
      border-bottom: 1px solid #cccccc90;
    }

    .con_info ul li.color:hover {
      border-color: pink;
    }

    .thisTime {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <section class="container">
    <header class="header">
      <select id="year">
        <option value="">选择年份</option>
      </select>年
      <select id="month">
        <option value="">选择月份</option>
      </select>月
      <button class="search_info" onclick="search()">查询</button>
    </header>
    <div class="con">
      <div class="top">
        <ul>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
          <li>日</li>
        </ul>
      </div>
      <div class="con_info">
        <ul class="days">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </section>
</body>
<script>
  // 尽量避免全局变量, 优化内存
  // 需求1 : 封装一个方法 作用是重复循环
  // 需求2 : 查询事件触发条件
  // 需求3 : 获取当月日历  获取当前月的第一天是星期几
  var listYear = document.querySelector('#year');
  var listMonth = document.querySelector('#month');
  var listDays = document.querySelector('.days').getElementsByTagName('li');

  function addInfo(callBack, firstYear, lastYear) {
    // var i = firstYear || 0;
    for (var i = firstYear; i < lastYear; i++) {
      callBack(i);
    }
  }
  addInfo(function (i) {
    var year = document.createElement('option');
    year.innerHTML = i;
    year.value = i;
    listYear.appendChild(year);
  }, 1900, 2051);

  addInfo(function (i) {
    var month = document.createElement('option');
    month.innerHTML = i;
    month.value = i; //
    listMonth.appendChild(month);
  }, 1, 13);

  // 2月份天数
  var dayArr = [30, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  function isLeap(year) {
    return year % 100 == 0 ? year % 400 == 0 ? 1 : 0 : year % 4 == 0 ? 1 : 0;
  }

  // 查询
  function search() {
    if (listYear.value == '' || listMonth.value == '') {
      window.alert('请选择年份或月份 ');
    } else {
      addInfo(function (i) {
        listDays[i].innerHTML = '';
      }, 0, listDays.length);

      var year = listYear.value;
      var month = listMonth.value - 1;
      var day = new Date().getDate();
      var firstDay = new Date(year, month, 1); // 当前年当前月的第一天
      dayArr[1] = isLeap(year) ? 29 : 28;
      var thisNum = firstDay.getDay(); //3

      addInfo(function (i) {
        //    周日bug  从6开始
        if (thisNum == 0) {
          listDays[thisNum + i + 6].innerHTML = i + 1;
        } else {
          listDays[thisNum + i - 1].innerHTML = i + 1;
        }
      }, 0, dayArr[month]);

      for (var j = 0; j < listDays.length; j++) {
        if (listDays[j].innerHTML == day) {
          listDays[j].className = 'thisTime';
        } else {
          if (listDays[j].innerHTML != 0) {
            listDays[j].className = 'color';
          }
        }
      }
    }
  }
</script>

</html>